<template>
  <div class="app-container page-container">
    <el-card class="box-card title-tips">
      <div class="title">温馨提示</div>
      <div class="text">
        <p>
          •
          生日墙隐藏：如果设置隐藏，薪福利App生日墙将不展示该人员的生日信息，应用场景：上级不告知下属其生日，免消息打扰。
        </p>
        <p>
          • 设置生日墙隐藏不影响企业向该人员发福利及短信祝福的功能。
        </p>
      </div>
    </el-card>
    <el-card class="box-card birthday-search-form">
      <el-form ref="dataForm" :inline="true" :model="dataForm" class="demo-form-inline">
        <el-form-item label="关键词" prop="keys">
          <el-input v-model="dataForm.keys" placeholder="请输入姓名/手机号"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <SelectTree
            ref="selectTree"
            :props="props"
            :options="orgTree"
            :value="dataForm.deptId"
            :clearable="isClearable"
            :accordion="isAccordion"
            height="200"
            @getValue="getValue($event)"
          ></SelectTree>
        </el-form-item>
        <el-form-item label="岗位" prop="post">
          <el-input v-model="dataForm.post" placeholder="请填写岗位名称"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthdayFilter">
          <el-select
            v-model="dataForm.birthdayFilter"
            placeholder="请选择"
            @change="dateRangeChange"
          >
            <el-option
              v-for="item in birthdayFilterList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对应日期">
          <el-date-picker
            v-model="dataForm.startTime"
            popper-class="birthday-picker"
            type="date"
            style="width: 150px"
            format="MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="statrPickOption"
            placeholder="开始日期"
          ></el-date-picker>
          ~
          <el-date-picker
            v-model="dataForm.endTime"
            style="width: 150px"
            popper-class="birthday-picker"
            type="date"
            format="MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            :picker-options="endPickOption"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm('dataForm')">重置</el-button>
          <el-button type="primary" @click="queryList()">查询</el-button>
          <wf-el-auth-button
            type="primary"
            auth-key="WALFARE-SRH-PLSFL"
            :disabled="selectionList.length < 1"
            @click="goSendGreeting(selectionList)"
          >
            批量送福利
          </wf-el-auth-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card table-card">
      <Table
        :table-data="tableData"
        :prop-data="propData"
        :paging-data="pagingData"
        :table-height="tableHeight"
        :is-show-selection="true"
        @getTableList="getTableList()"
        @selectionChange="selectionChange"
      >
        <template slot="useStatus">
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ scope.row.useStatus == 0 ? '在职' : scope.row.useStatus == 1 ? '离职' : '注销' }}
            </template>
          </el-table-column>
        </template>
        <template slot="gender">
          <el-table-column label="性别">
            <template slot-scope="scope">
              {{ scope.row.gender == 1 ? '男' : scope.row.gender == 0 ? '女' : '未知' }}
            </template>
          </el-table-column>
        </template>
        <template slot="isBirthdayWallShow">
          <el-table-column label="是否展示生日墙">
            <template slot-scope="scope">
              {{ scope.row.isBirthdayWallState == 0 ? '不展示' : '展示' }}
            </template>
          </el-table-column>
        </template>
        <template slot="birthdayTime">
          <el-table-column label="生日">
            <template slot-scope="scope">
              <span>{{ (scope.row.birthday && scope.row.birthday.substring(0, 10)) || '-' }}</span>
            </template>
          </el-table-column>
        </template>
        <template slot="op">
          <el-table-column fixed="right" width="200px" label="操作">
            <template slot-scope="scope">
              <wf-el-auth-button
                type="text"
                auth-key="WALFARE-SRH-SFL"
                @click="goSendGreeting([scope.row])"
              >
                送福利
              </wf-el-auth-button>
              <wf-el-auth-button
                auth-key="WALFARE-SRH-ONOFF"
                type="text"
                :disabled="scope.row.disabled"
                @click="isShowBirthdayWall(scope.row)"
              >
                生日墙{{ scope.row.isBirthdayWallState == 1 ? '隐藏' : '展示' }}
              </wf-el-auth-button>
            </template>
          </el-table-column>
        </template>
      </Table>
    </el-card>
  </div>
</template>

<script>
  import Table from '@/components/Table';
  import { mapGetters } from 'vuex';
  import { getLocalData } from '@/utils/localStore';
  import SelectTree from '@/components/selectTree/index.vue';
  import { getBirthdayPartyUserList, updateBirthdayWallState } from '@/api/birthdayParty';
  import { getMonth, getMonday } from './getDate';
  export default {
    components: { Table, SelectTree },
    data() {
      return {
        selectionList: [], //被选中的数据
        isClearable: false, // 可清空（可选）
        isAccordion: true, // 可收起（可选）
        tableData: [],
        isReturn: false,
        props: {
          // 配置项（必选）
          value: 'id',
          label: 'deptName',
          children: 'organizationTreeVo',
          // disabled:true
        },
        propData: [
          {
            prop: 'jobNumber',
            label: '工号',
          },
          {
            prop: 'realName',
            label: '姓名',
          },
          {
            prop: 'organizationDeptName',
            label: '部门',
          },
          {
            prop: 'position',
            label: '岗位',
          },
          {
            prop: 'useStatus',
            label: '状态',
            type: 'useStatus',
          },
          {
            prop: 'mobilePhone',
            label: '手机号',
          },
          {
            prop: 'gender',
            label: '性别',
            type: 'gender',
          },
          {
            prop: 'birthday',
            label: '生日',
            type: 'birthdayTime',
          },
          {
            prop: 'entryTime',
            label: '入职日期',
          },
          {
            prop: 'isBirthdayWallShow',
            label: '生日墙是否展示',
            type: 'isBirthdayWallShow',
          },
          {
            prop: 'op',
            label: '操作',
            type: 'op',
          },
        ],
        pagingData: {
          current: 1,
          size: 10,
          total: 20,
        },
        tableHeight: '500px',
        birthdayFilterList: [
          { label: '自定义', value: 0 },
          { label: '本月生日', value: 1 },
          { label: '本周生日', value: 2 },
          { label: '下周生日', value: 3 },
        ],
        /**
         * @Author: lixb
         * @Date: 2020-08-26 09:52:59
         * @msg: 生日日期范围，要求只展示月，日，并且二月29天，所以默认年份写死2020年，1月1日之前和12月31日之后禁用掉；只能选择2020年1-12月之间的时间；
         */
        statrPickOption: {
          disabledDate: time => {
            return time.getTime() < 1577808000000 || time.getTime() > 1609344000000;
          },
        },
        endPickOption: {
          disabledDate: time => {
            return time.getTime() < 1577808000000 || time.getTime() > 1609344000000;
          },
        },
        dataForm: {
          keys: '',
          post: '',
          status: 0,
          startTime: null,
          endTime: null,
          deptId: null,
          birthdayFilter: 0,
        },
        postList: [],
      };
    },
    computed: {
      ...mapGetters('organization', ['orgTree']),
      welfareName() {
        return getLocalData('welfareName');
      },
    },
    watch: {},
    activated() {
      this.getTableList();
    },
    methods: {
      // 取值
      getValue(value) {
        this.dataForm.deptId = value;
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs.selectTree.valueTitle = '';
        this.dataForm.startTime = '';
        this.dataForm.endTime = '';
      },
      //生日过滤条件改变（本月，本周，下周，自定义）
      dateRangeChange(val) {
        if (val == 1) {
          this.dataForm.startTime = getMonth('s', 0);
          this.dataForm.endTime = getMonth('e', 0);
        } else if (val == 2) {
          this.dataForm.startTime = getMonday('s', 0);
          this.dataForm.endTime = getMonday('e', 0);
        } else if (val == 3) {
          this.dataForm.startTime = getMonday('s', 1);
          this.dataForm.endTime = getMonday('e', 1);
        } else {
          this.dataForm.startTime = '';
          this.dataForm.endTime = '';
        }
      },
      queryList() {
        this.pagingData.current = 1;
        this.getTableList();
      },
      getTableList() {
        let params = {
          birthDayStartMonthDay: this.dataForm.startTime,
          birthDayEndMonthDay: this.dataForm.endTime,
          position: this.dataForm.post,
          searchKeyWord: this.dataForm.keys,
          useStatus: this.dataForm.status,
          currentPage: this.pagingData.current,
          pageSize: this.pagingData.size,
          deptId: this.dataForm.deptId,
        };
        getBirthdayPartyUserList(params).then(res => {
          this.tableData = res.data.records;
          this.pagingData.total = res.data.total;
          this.tableData = this.tableData.map(item => {
            return { ...item, disabled: false };
          });

          // this.isReturn = false;
        });
      },
      //当前选中的行
      selectionChange(arr) {
        this.selectionList = arr;
      },
      isShowBirthdayWall(row) {
        row.disabled = true;
        let params = {
          id: row.id,
          isBirthdayWallShow: row.isBirthdayWallState == 1 ? 0 : 1,
          userId: row.userId,
          version: row.version,
        };
        updateBirthdayWallState(params).then(res => {
          if (res.status == 200) {
            this.getTableList();
            this.$message.success(`操作成功！`);
          }
        });
      },
      //前往送福利页面
      goSendGreeting(arr) {
        let ids = [];
        arr.map(function(item) {
          ids.push(item.userId);
        });
        this.$router.push({ path: '/careCard/distribute', query: { ids: ids.join(',') } });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .title-tips {
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .text {
      color: #7f848b;
    }
  }
  .birthday-search-form {
    margin-top: 15px;
  }
  .table-card {
    margin-top: 15px;
  }
</style>
<style lang="scss">
  .birthday-picker {
    .el-icon-d-arrow-left,
    .el-icon-d-arrow-right {
      display: none;
    }
    .el-date-picker__header {
      .el-date-picker__header-label {
        &:nth-of-type(1) {
          display: none;
        }
      }
    }
  }
</style>
